<template>
<div style="display: block;background: #505458">
    <el-row>
        <el-col :span="10">
            <el-form ref="formInline" :model="formInline" :rules="ruleInline" style="float: left">
                <el-form-item prop="user" style="float: left">
                    <el-input type="text" v-model="formInline.user" placeholder="文章名字" style="float: left">文章名字</el-input>
                </el-form-item>
                <el-form-item prop="is_public" style="float: left;margin-left: 20px;">
                    <el-checkbox v-model="is_public" style="color:white">不公开</el-checkbox>
                </el-form-item>
                <el-form-item style="float: left">
                    <el-button @click="getArticles" type="primary" style="float: left;margin-left: 10px; ">查询</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <el-col :span="1">
            <div style="display: block;margin-top: 8px; font-size:15px; ">
                分类:
            </div>
        </el-col>
        <el-col :span="3" style="margin-left: 20px">
            <el-select v-model="currentGroup" placeholder="选择分组" @change="OnChangeGroup">
                <el-option v-for="item in this.docgroups" :key="item.Int" :label="item.Name" :value="item.Int"></el-option>
            </el-select>
        </el-col>
        <el-col :span="3">
            <el-select v-model="docType"  placeholder="分类" style="margin-left: 20px">
                <el-option v-for="item in this.doc_types" :key="item.id" :label="item.type_name" :value="item.id">
                </el-option>
            </el-select>
        </el-col>
    </el-row>
    <el-table :data="data1" border style="width: 100%;text-aligin:center;background: #505458" highlight-current-row ref="singleTable">
        <el-table-column type="index" width="50">
        </el-table-column>
        <el-table-column prop="title" label="标题" width="120">
        </el-table-column>
        <el-table-column prop="author" label="作者" width="120">
        </el-table-column>
        <el-table-column prop="content" label="内容">
        </el-table-column>
        <el-table-column prop="typename" label="类型" width="180">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
            <template slot-scope="scope">
                <el-button type="text" @click="handleClick(scope)" size="small">查看</el-button>
                <el-button type="text" @click="handleEdit(scope)" size="small">编辑</el-button>
                <el-button type="text" @click="handleDelete(scope)" size="small">删除</el-button>

            </template>
        </el-table-column>
    </el-table>
    <div class="block">
        <el-pagination layout="prev, pager, next" :total="articleCount" @current-change="handleChangePage">
        </el-pagination>
    </div>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
        <span>这是一段信息</span>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
    </el-dialog>
</div>
</template>

<script>
import axios from '@/api/ajax.js'
import Table from 'element-ui/lib/table';
import TableColumn from 'element-ui/lib/table-column';
import Vue from "vue/dist/vue.js";
import Pagination from 'element-ui/lib/pagination';
import Message from 'element-ui/lib/message'
import Cookie from 'js-cookie'
import Const from '@/const.js'
import MessageBox from 'element-ui/lib/message-box'

Vue.use(Table);
Vue.use(TableColumn);
Vue.use(Pagination);
export default {
    name: "tes",
    data: () => {
        return {
            currentGroup: "",
            is_public: 0,
            dialogVisible: false,
            type: "",
            types: [],
            limit: 10,
            offset: 0,
            formInline: {
                dockname: '',
                type: ''
            },
            articleCount: 0,
            articleCountAll: 3,
            ruleInline: {
                dockname: [{
                    message: '请输入查询的文章名字',
                    trigger: 'blur'
                }],
                password: [{
                        message: 'Please fill in the password.',
                        trigger: 'blur'
                    },
                    {
                        type: 'string'
                    }
                ]
            },
            data1: [{}],
            data2: [],
            docKey: "",
            docType: 110,
            doc_types: [],
            doc_typess: new Map,
        }
    },
    methods: {
        handleTypeSelect(obj) {
            let j = 0;
            let tmp = [];
            for (let len = this.data2.length; j < len; j++) {
                if (this.data2[j].type === obj) {
                    tmp.push(this.data2[j]);
                }
            }
            this.data1 = [];
            j = 0;
            for (let len = tmp.length; j < len; j++) {
                this.data1.push(tmp[j]);
            }
        },
        handlerShow(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => {});
        },
        handleChangePage(page) {
            axios.post('/articles?limit=' + this.limit + '&offset=' + (page - 1) * this.limit, {
                name: this.formInline.user,
                types: this.docType
            }).then(response => {
                this.data1 = [];
                this.data2 = [];
                if (response.data.Status === 0) {
                    let j = 0;
                    for (let len = response.data.Data.length; j < len; j++) {
                        response.data.Data[j].typename = this.doc_typess.get(String(response.data.Data[j].type)).type_name

                        this.data1.push(response.data.Data[j]);
                    }
                }
            }).catch(reason => {
                Message.error("网络错误:" + reason);
            });
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => {});
        },
        handleClick(row) {
            this.$router.push("/article/" + row.row.id);
        },
        handleEdit(row) {
            this.$router.push("/BarIView/editor?id=" + row.row.id);
        },
        handleDelete(row) {
            MessageBox.confirm('确认关闭？')
                .then(_ => {
                    axios.delete('/article/' + row.row.id, {}).then(response => {
                        if (response.data.Status === 0) {
                            let j = 0;
                            for (let len = this.data1.length; j < len; j++) {
                                if (this.data1[j].id == row.row.id) {

                                    this.data1.splice(j, 1)
                                }
                                //this.data1.push(response.data.Data[j]);
                            }
                            Message.success("删除成功");
                        }
                    }).catch(reason => {
                        Message.error("网络错误:" + reason);
                    });
                    done();
                })
                .catch(_ => {});

        },
        getArticles() {
            axios.post('/articles?limit=' + this.limit + '&offset=' + this.offset + '&is_public=' + this.is_public, {
                name: this.formInline.user,
                types: this.docType
            }).then(response => {
                this.data1 = [];
                if (response.data.Status === 0) {
                    let j = 0;
                    for (let len = response.data.Data.length; j < len; j++) {
                        this.data2.push(response.data.Data[j]);

                        response.data.Data[j].typename = this.doc_typess.get(String(response.data.Data[j].type)).type_name
                        this.data1.push(response.data.Data[j]);

                    }
                    if (this.docType != 110)
                        this.articleCount = response.data.Data.length;
                }
            }).catch(reason => {
                Message.error("网络错误:" + reason);
            });
        },
        getArtcleTypes(){
            axios.get("doc_types", {
                withCredentials: true
            }).then(
                resp => {
                    this.doc_types.push({
                        "Id": 110,
                        "type_name": "全部"
                    });
                    let j = 0;
                    for (let typeNum = resp.data.Data.length; j < typeNum; j++) {
                        this.doc_types.push(resp.data.Data[j])
                        this.doc_typess.set(String(resp.data.Data[j]["id"]),resp.data.Data[j])
                    }
                }
            ).catch(
                reason => {
                    Message.error(reason)
                }
            )
        },
        getArticleCount() {
            axios.get('/articleCount', {}).then(response => {
                if (response.data.Status === 0) {
                    this.articleCountAll = response.data.Data.cnt
                    this.articleCount = this.articleCountAll;
                }
            }).catch(reason => {
                Message.error("网络错误:" + reason);
            });
        },
        OnChangeGroup() {
            console.log(this.currentGroup, this.docgroups[this.currentGroup])
            this.getGroupType(this.docgroups[this.currentGroup].Int);
        },
        getGroupType(id) {
            axios.post("/group_type", {
                id: id,
            })
                .then(response => {
                    if (response.data.Status === 0) {
                        console.log(response.data.Data)
                        this.doc_types = response.data.Data;
                        this.docType = this.doc_types[0].id;
                    }
                })
                .catch(reason => {
                    Message.error("网络错误:" + reason);
                });
        },
        getDocGroup() {
            axios.get('/doc_groups', {}).then(response => {
                if (response.data.Status === 0) {
                    console.log(response.data.Data);
                    this.docgroups = response.data.Data;
                } else {}
            }).catch(reason => {
                Message.error("网络错误:" + reason);
            });
        }
    },
    created() {
        this.getArtcleTypes()

        console.log(this.Global.ws.send("shjit"))
        this.getDocGroup()
        this.getArticles()
        let userInfo = JSON.parse(Cookie.get(Const.KEY_USER_INFO));
        console.log(userInfo)
        let url = '/user';
        url += 'user=' + userInfo["UserName"]
        url += '&token=' + userInfo["SocketToken"]

        axios.get(url)
            .then(response => {
                console.log(response);
                if (response.data.Status === 0) {

                } else {
                    this.$router.push("/login");
                }
            })
    },
    mounted() {
        this.getArticleCount()
    },
    beforeCreate() {
        
    }
}
</script>

<style scoped>
.el-button--primary:focus,
.el-button--primary:hover {
    background: #DCDFE6;
}
</style>
